/*
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-03-27 09:13:36
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-10-09 15:11:41
 * @FilePath: \vue3-progect\src\plugin\directive.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { DirectiveBinding, ObjectDirective, createApp, App } from "vue";

/**
 * 自定义指令
 */
const app: any = createApp({});
app;
export default {
	install(app: App) {
		scrollTableFun(app);
	}
};

//定义滚动列表指令

/**
 * 定义定时器实例
 */
let timer: NodeJS.Timer | null = null;
//滚动列表动画
const scrollTableFun = (app: App) => {
	app.directive("scrollTable", scrollTableOption);
};
const scrollTableOption: ObjectDirective = {
	//
	created(el: HTMLElement, binding: DirectiveBinding) {
		console.log(el, binding, "created");
	},
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		el.style.overflow = "auto";
		let childrenEls: HTMLCollection = el.children;
		if (childrenEls.length > 1 || childrenEls.length <= 0) {
			throw new Error("请检查滚动列表格式是否正确");
		}
		console.log(childrenEls, "childrenELs");
		let childrenEl: Element = childrenEls[0];
		//滚动高度小于可视高度时
		timer = setInterval(() => {
			if (childrenEl.scrollHeight <= el.clientHeight) {
				return;
			} else {
				if (childrenEl.scrollHeight > el.scrollTop + el.clientHeight) {
					el.scrollTop += 1;
				} else {
					el.scrollTop = 0;
				}
			}
		}, 100);
	},
	beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {
		console.log(el, binding, "beforeUpdate");
	},
	beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
		console.log(el, binding, "beforeUnmount");
	}
	// beforeUpdate(el, binding, vnode, prevVnode) {},
	// update(el, binding, vnode, prevVnode) {},
	// beforeUnmount(el, binding, vnode, prevVnode) {},
	// unMounted(el, binding, vnode, prevVnode) {}
};

/**
 * 清除定时器
 */
const clearInterval = (timer: NodeJS.Timer | null) => {
	console.log("clearInterval");
	clearInterval(timer);
};
